<script setup>
import { ref } from "vue";
</script>

<template>
  <div class="bottomCom">
    <div class="left">
      <img src="/src/assets/images/title.png" alt="" />
      <span>给大家带来便利，给自己积攒功德，哦耶~</span>
      <span>欢迎大家前来探索哦~</span>
    </div>
    <div class="center">
      <ul>
        <li class="icon">
          <el-popover placement="bottom" title="我的QQ" popper-class="myBottom">
            <template #reference>
              <i class="iconfont icon-QQ"></i>
            </template>
            <template #default>
              <img src="/src/assets/images/bottom/myQQ.jpg" alt="" />
            </template>
          </el-popover>
        </li>
        <li class="icon">
          <el-popover placement="bottom" title="我的Weixin" popper-class="myBottom">
            <template #reference>
              <i class="iconfont icon-weixin"></i>
            </template>
            <template #default>
              <img src="/src/assets/images/bottom/myWx.jpg" alt="" />
            </template>
          </el-popover>
        </li>
        <li class="icon">
          <el-popover
            placement="top-start"
            title="我的Google Mail"
            :width="200"
            trigger="hover"
            content="yytt68888@gmail.com"
            popper-class="myBottom"
          >
            <template #reference>
              <i class="iconfont icon-gmail"></i>
            </template>
          </el-popover>
        </li>
      </ul>
    </div>
    <div class="right">
      <div>
        <img src="/src/assets/images/bottom/没有qq群.png" alt="" />
        <span>扫码加QQ群</span>
      </div>
      <div>
        <img src="/src/assets/images/bottom/还没有公众号.png" alt="" />
        <span>扫码关注公众号</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import url("@/assets/style/comStyle/bottom/bottom.scss");
</style>
<style lang="scss">
.myBottom.el-popover.el-popper {
  text-align: center;
  width: 90px;
  img {
    width: 90px;
    height: 90px;
    object-fit: contain;
  }
}
.bottomCom {
  &::before {
    content: "";
    position: absolute;
    top: -80px;
    left: -8px;
    width: 100%;
    height: 80px; 
    background: linear-gradient(to bottom, #ffffff, #e5f2ff); 
    border-radius: 10px 100px 10px 0;
    // 用于定义一个多边形剪切路径，能够裁剪元素的显示区域
    clip-path: polygon(
      0% 100%,
      10% 80%,
      20% 90%,
      30% 70%,
      40% 85%,
      50% 60%,
      60% 80%,
      70% 50%,
      80% 75%,
      90% 40%,
      100% 50%,
      100% 100%,
      0% 100%
    );
  }
}
</style>
